<template>
  <el-dialog
    v-model="visible"
    title="预警设置"
    width="50%"
    :close-on-click-modal="false"
    :destroy-on-close="true"
  >
    <el-tabs v-model="activeTab" type="border-card">
      <!-- 阈值模型 -->
      <el-tab-pane label="监测阈值模型" name="threshold">
        <el-card class="form-card">
          <el-form :model="thresholdForm" label-width="130px" label-position="left">
            <el-form-item label="位移阈值">
              <el-input
                v-model="thresholdForm.displacement"
                placeholder="请输入位移阈值 (mm)"
                clearable
              />
            </el-form-item>
            <el-form-item label="速度阈值">
              <el-input
                v-model="thresholdForm.velocity"
                placeholder="请输入速度阈值 (mm/d)"
                clearable
              />
            </el-form-item>
            <el-form-item label="加速度阈值">
              <el-input
                v-model="thresholdForm.acceleration"
                placeholder="请输入加速度阈值 (mm/d²)"
                clearable
              />
            </el-form-item>
            <el-form-item class="form-footer">
              <el-button type="primary" @click="saveThreshold">保存阈值模型</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 连续位移模型 -->
      <el-tab-pane label="连续位移模型" name="continuous">
        <el-card class="form-card">
          <el-form :model="continuousForm" label-width="150px" label-position="left">
            <el-form-item label="同方向位移次数">
              <el-input
                v-model="continuousForm.repeatCount"
                placeholder="请输入次数"
                clearable
              />
            </el-form-item>
            <el-form-item class="form-footer">
              <el-button type="primary" @click="saveContinuous">保存连续位移模型</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";

// Dialog 可见性
const visible = ref<boolean>(false);

// Tabs 激活项
const activeTab = ref<string>("threshold");

// 阈值模型表单类型
interface ThresholdForm {
  displacement: string;
  velocity: string;
  acceleration: string;
}
const thresholdForm = ref<ThresholdForm>({
  displacement: "",
  velocity: "",
  acceleration: ""
});

// 连续位移模型表单类型
interface ContinuousForm {
  repeatCount: string;
}
const continuousForm = ref<ContinuousForm>({
  repeatCount: ""
});

// 保存函数
const saveThreshold = () => {
  console.log("保存阈值模型:", thresholdForm.value);
  ElMessage.success("阈值模型已保存");
};

const saveContinuous = () => {
  console.log("保存连续位移模型:", continuousForm.value);
  ElMessage.success("连续位移模型已保存");
};

// 暴露给父组件调用
const open = () => {
  visible.value = true;
};
defineExpose({ open });
</script>

<style scoped>
.form-card {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-footer {
  text-align: right;
  margin-top: 10px;
}

.el-input {
  width: 200px;
}
</style>
